{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - NEPSE Stock Forecasting{% endblock %}

{% block content %}
<div class="px-4 py-6 sm:px-0">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
        <p class="mt-2 text-gray-600">Monitor your stock forecasting models and market performance</p>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        <!-- Total Stocks -->
        <div class="group bg-white overflow-hidden shadow-xl rounded-2xl card-hover transform transition-all duration-300 hover:shadow-2xl">
            <div class="p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-building text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-semibold text-gray-500 truncate">Total Stocks</dt>
                            <dd class="text-2xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors duration-300" id="totalStocks">{{ total_stocks }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="flex items-center text-sm text-green-600">
                        <i class="fas fa-arrow-up mr-1"></i>
                        <span class="font-medium">Active tracking</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Predictions -->
        <div class="group bg-white overflow-hidden shadow-xl rounded-2xl card-hover transform transition-all duration-300 hover:shadow-2xl">
            <div class="p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-crystal-ball text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-semibold text-gray-500 truncate">Total Predictions</dt>
                            <dd class="text-2xl font-bold text-gray-900 group-hover:text-green-600 transition-colors duration-300" id="totalPredictions">{{ total_predictions }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="flex items-center text-sm text-blue-600">
                        <i class="fas fa-chart-line mr-1"></i>
                        <span class="font-medium">Forecasts generated</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Models Trained -->
        <div class="group bg-white overflow-hidden shadow-xl rounded-2xl card-hover transform transition-all duration-300 hover:shadow-2xl">
            <div class="p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-brain text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-semibold text-gray-500 truncate">Models Trained</dt>
                            <dd class="text-2xl font-bold text-gray-900 group-hover:text-purple-600 transition-colors duration-300" id="modelsTrained">{{ models_trained }}</dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="flex items-center text-sm text-purple-600">
                        <i class="fas fa-robot mr-1"></i>
                        <span class="font-medium">AI models ready</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Last Update -->
        <div class="group bg-white overflow-hidden shadow-xl rounded-2xl card-hover transform transition-all duration-300 hover:shadow-2xl">
            <div class="p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-clock text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-semibold text-gray-500 truncate">Last Data Update</dt>
                            <dd class="text-lg font-bold text-gray-900 group-hover:text-orange-600 transition-colors duration-300" id="lastUpdate">
                                {% if latest_data_date %}{{ latest_data_date }}{% else %}No data{% endif %}
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-sync-alt mr-1"></i>
                        <span class="font-medium">Data synchronized</span>
                    </div>
                </div>
            </div>
        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stock Selection and Chart -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Stock Selection -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Select Stock</h3>
            <div class="space-y-4">
                <div>
                    <label for="stockSelect" class="block text-sm font-medium text-gray-700">Stock Symbol</label>
                    <select id="stockSelect" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select a stock...</option>
                        {% for stock in stocks %}
                            <option value="{{ stock.symbol }}">{{ stock.symbol }} - {{ stock.company_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label for="timeRange" class="block text-sm font-medium text-gray-700">Time Range</label>
                    <select id="timeRange" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        <option value="30">Last 30 days</option>
                        <option value="90">Last 3 months</option>
                        <option value="180">Last 6 months</option>
                        <option value="365">Last year</option>
                    </select>
                </div>
                
                <button id="loadChart" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Load Chart
                </button>
            </div>
        </div>

        <!-- Stock Chart -->
        <div class="lg:col-span-2 bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Stock Price Chart</h3>
            <div class="relative">
                <canvas id="stockChart" width="400" height="200"></canvas>
                <div id="chartPlaceholder" class="flex items-center justify-center h-48 text-gray-500">
                    Select a stock to view the chart
                </div>
            </div>
        </div>
    </div>

    <!-- Model Performance and Recent Predictions -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Model Performance -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Model Performance Overview</h3>
            <div class="space-y-4">
                <canvas id="performanceChart" width="400" height="300"></canvas>
            </div>
        </div>

        <!-- Recent Predictions -->
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Recent Predictions</h3>
            <div class="overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        </tr>
                    </thead>
                    <tbody id="recentPredictionsTable" class="bg-white divide-y divide-gray-200">
                        <!-- Will be populated by JavaScript -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-8 bg-white shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <button id="initializeData" class="bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
                <i class="fas fa-database mr-2"></i>
                Initialize Data
            </button>
            
            <button id="scrapeData" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <i class="fas fa-download mr-2"></i>
                Scrape New Data
            </button>
            
            <button id="trainModels" class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500">
                <i class="fas fa-brain mr-2"></i>
                Train Models
            </button>
            
            <button id="refreshDashboard" class="bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500">
                <i class="fas fa-sync-alt mr-2"></i>
                Refresh Dashboard
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/charts.js' %}"></script>
<script>
// Simple Chart.js availability check
function isChartAvailable() {
    return typeof Chart !== 'undefined' && Chart.version;
}

// Initialize dashboard
function initializeDashboardWithCharts() {    
    // Initialize dashboard
    initializeDashboard();
    loadModelPerformance();
    loadRecentPredictions();
    
    // Event listeners
    document.getElementById('loadChart').addEventListener('click', loadStockChart);
    document.getElementById('initializeData').addEventListener('click', initializeData);
    document.getElementById('scrapeData').addEventListener('click', scrapeData);
    document.getElementById('trainModels').addEventListener('click', trainModels);
    document.getElementById('refreshDashboard').addEventListener('click', refreshDashboard);
}

// Use both DOMContentLoaded and window.onload to ensure everything is loaded
document.addEventListener('DOMContentLoaded', function() {
    // If Chart is already available, initialize immediately
    if (isChartAvailable()) {
        initializeDashboardWithCharts();
    } else {
        // Otherwise wait for window.onload
        window.addEventListener('load', initializeDashboardWithCharts);
    }
});

let stockChart = null;
let performanceChart = null;

async function initializeDashboard() {
    try {
        const response = await fetch('/api/dashboard/');
        const data = await response.json();
        
        // Update statistics
        document.getElementById('totalStocks').textContent = data.total_stocks;
        document.getElementById('totalPredictions').textContent = data.total_predictions;
        document.getElementById('modelsTrained').textContent = data.models_trained;
        document.getElementById('lastUpdate').textContent = data.latest_data_date || 'No data';
        
    } catch (error) {
        console.error('Error loading dashboard data:', error);
        showNotification('Error loading dashboard data', 'error');
    }
}

async function loadStockChart() {
    const stockSymbol = document.getElementById('stockSelect').value;
    const timeRange = document.getElementById('timeRange').value;
    
    if (!stockSymbol) {
        showNotification('Please select a stock', 'warning');
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetch(`/api/stocks/${stockSymbol}/chart_data/?days=${timeRange}`);
        const data = await response.json();
        
        // Hide placeholder and show chart
        document.getElementById('chartPlaceholder').style.display = 'none';
        document.getElementById('stockChart').style.display = 'block';
        
        createStockChart(data);
        hideLoading();
        
    } catch (error) {
        console.error('Error loading chart data:', error);
        showNotification('Error loading chart data', 'error');
        hideLoading();
    }
}

function createStockChart(data) {
    // Check if Chart.js is available
    if (typeof Chart === 'undefined') {
        return;
    }
    
    const ctx = document.getElementById('stockChart').getContext('2d');
    
    if (stockChart) {
        stockChart.destroy();
    }
    
    stockChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.dates,
            datasets: [
                {
                    label: 'Actual Price',
                    data: data.prices,
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.1
                },
                {
                    label: 'Predictions',
                    data: data.predictions,
                    borderColor: 'rgb(239, 68, 68)',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    borderDash: [5, 5],
                    tension: 0.1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: false,
                    title: {
                        display: true,
                        text: 'Price (Rs.)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Stock Price vs Predictions'
                },
                legend: {
                    display: true
                }
            }
        }
    });
}

async function loadModelPerformance() {
    try {
        const response = await fetch('/api/metrics/');
        const metrics = await response.json();
        
        if (metrics.results && metrics.results.length > 0) {
            createPerformanceChart(metrics.results);
        }
        
    } catch (error) {
        console.error('Error loading model performance:', error);
    }
}

function createPerformanceChart(metrics) {
    if (typeof Chart === 'undefined') {
        return;
    }
    
    const ctx = document.getElementById('performanceChart').getContext('2d');
    
    if (performanceChart) {
        performanceChart.destroy();
    }
    
    const lstmMetrics = metrics.filter(m => m.model_type === 'LSTM');
    const svrMetrics = metrics.filter(m => m.model_type === 'SVR');
    
    performanceChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['RMSE', 'MAPE', 'R²', 'Direction Accuracy'],
            datasets: [
                {
                    label: 'LSTM',
                    data: [
                        lstmMetrics.length > 0 ? lstmMetrics[0].rmse : 0,
                        lstmMetrics.length > 0 ? lstmMetrics[0].mape : 0,
                        lstmMetrics.length > 0 ? lstmMetrics[0].r2_score : 0,
                        lstmMetrics.length > 0 ? lstmMetrics[0].direction_accuracy : 0
                    ],
                    backgroundColor: 'rgba(59, 130, 246, 0.8)'
                },
                {
                    label: 'SVR',
                    data: [
                        svrMetrics.length > 0 ? svrMetrics[0].rmse : 0,
                        svrMetrics.length > 0 ? svrMetrics[0].mape : 0,
                        svrMetrics.length > 0 ? svrMetrics[0].r2_score : 0,
                        svrMetrics.length > 0 ? svrMetrics[0].direction_accuracy : 0
                    ],
                    backgroundColor: 'rgba(239, 68, 68, 0.8)'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Model Performance Comparison'
                }
            }
        }
    });
}

async function loadRecentPredictions() {
    try {
        const response = await fetch('/api/predictions/?limit=10');
        const data = await response.json();
        
        const tableBody = document.getElementById('recentPredictionsTable');
        tableBody.innerHTML = '';
        
        if (data.results && data.results.length > 0) {
            data.results.forEach(prediction => {
                const row = tableBody.insertRow();
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${prediction.stock_symbol}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${prediction.model_type}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatCurrency(prediction.predicted_price)}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${prediction.prediction_date}</td>
                `;
            });
        } else {
            const row = tableBody.insertRow();
            row.innerHTML = '<td colspan="4" class="px-6 py-4 text-center text-gray-500">No predictions available</td>';
        }
        
    } catch (error) {
        console.error('Error loading recent predictions:', error);
    }
}

async function initializeData() {
    if (!confirm('This will initialize sample data. Continue?')) return;
    
    showLoading();
    
    try {
        const response = await fetch('/api/initialize/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfTokenFromCookie(),
            }
        ,
            credentials: 'same-origin'
        });
        
        const result = await response.json();
        
        if (response.ok) {
            showNotification(result.message, 'success');
            refreshDashboard();
        } else {
            showNotification(result.error || 'Failed to initialize data', 'error');
        }
        
    } catch (error) {
        console.error('Error initializing data:', error);
        showNotification('Error initializing data', 'error');
    } finally {
        hideLoading();
    }
}

async function scrapeData() {
    if (!confirm('This will scrape new data from external sources. Continue?')) return;
    
    showLoading();
    
    try {
        const response = await fetch('/api/scrape/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfTokenFromCookie(),
            }
        ,
            credentials: 'same-origin'
        });
        
        const result = await response.json();
        
        if (response.ok) {
            showNotification(result.message, 'success');
            refreshDashboard();
        } else {
            showNotification(result.error || 'Failed to scrape data', 'error');
        }
        
    } catch (error) {
        console.error('Error scraping data:', error);
        showNotification('Error scraping data', 'error');
    } finally {
        hideLoading();
    }
}

async function trainModels() {
    const stockSymbol = document.getElementById('stockSelect').value;
    
    if (!stockSymbol) {
        showNotification('Please select a stock first', 'warning');
        return;
    }
    
    if (!confirm(`Train models for ${stockSymbol}? This may take several minutes.`)) return;
    
    showLoading();
    
    try {
        const response = await fetch('/api/train/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfTokenFromCookie(),
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                stock_symbols: [stockSymbol],
                model_types: ['LSTM', 'SVR']
            })
        });
        
        const result = await response.json();
        
        if (response.ok) {
            showNotification(result.message, 'success');
            if (result.results) {
                // Show per-model failure reasons if present
                for (const [modelKey, modelResult] of Object.entries(result.results)) {
                    if (modelResult.status !== 'success') {
                        const reason = modelResult.reason ? ` - ${modelResult.reason}` : '';
                        showNotification(`${modelKey}: Training failed${reason}`, 'warning');
                    }
                }
            }
            refreshDashboard();
        } else {
            showNotification(result.error || 'Failed to train models', 'error');
        }
        
    } catch (error) {
        console.error('Error training models:', error);
        showNotification('Error training models', 'error');
    } finally {
        hideLoading();
    }
}

function refreshDashboard() {
    window.location.reload();
}

// CSRF: read token from cookie set by Django
function getCsrfTokenFromCookie() {
    const name = 'csrftoken=';
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return '';
}
</script>
{% endblock %}